<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>key的使用</title>
  <script src="vue.js"></script>
</head>
<!--

-->
<body>
<div id="root">
    <button @click = "updateM">updateM</button>
    <ul>
        <h2>List:</h2>
<!--        遍历数组-->
        <li v-for="(p,index) in persons" :key="p.id">{{p.name}}-{{p.age}}</li>
    </ul>
</div>
</body>
<script type="text/javascript">
    const  vm = new Vue({
        el:"#root",
        data:{
            persons:[
                {id:'001',name:"马冬梅",age:1},
                {id:'002',name:"周冬雨",age:19},
                {id:'003',name:"周杰伦",age:13},
                {id:'004',name:"盖伦",age:16}
            ],
        },
        methods:{
            updateM(){
                //改了显示成功
              this.persons[0].name="马老师"
              this.persons[0].age=40

                //改了但是不显示
              this.persons[0]={id:'001',name:"马",age:1}


            }
        }
    })
</script>

</html>